<template>
	<div class="realTimeVideo">
		<div class="realTimeVideoBody">
			<!--我是视频-->
			<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" 
				:options="playerOptions" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)">
			</video-player>
			<div class="close" @click="closeInfo"></div>
		</div>
	</div>
</template>

<script>
//	import { videoPlayer } from 'vue-video-player'
//	import 'video.js/dist/video-js.css'
	
//	import Swiper from 'swiper'; 
//	import 'swiper/dist/css/swiper.min.css';
	
//	import "../assets/css/resetVideo.css";
	//引入video
	import { videoPlayer } from "vue-video-player";
	export default{
		//name: "rel_time_video",
		props:{
			videourl:{type:String}
		},
		watch: {
			videourl: {
		  		deep: true,
		  		handler(newVal, oldVal) {
					console.log(newVal,"videoUrl");
		  			if (newVal != null) {
		  				if(newVal.indexOf('_0_0.m3u8')!=-1){
		  					newVal = newVal.replace('_0_0.m3u8','_0_1.m3u8')
		  				}
		  				this.playerOptions.sources[0].src = newVal;
		  			}
		       },
		       immediate: true,
		  	},
		},
		components: {
		 videoPlayer
		},
		//完整的配置数据（不要的可以直接注释掉）
		data() {
		  return {
		  	playerOptions: {
      //        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
			      autoplay: true, //如果true,浏览器准备好时开始回放。
			      muted: false, // 默认情况下将会消除任何音频。
			      loop: false, // 导致视频一结束就重新开始。
			      preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
			      language: "zh-CN",
			      aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
			      fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
			      sources: [
			        {
			          // type: "application/x-mpegURL",
			          //http://111.21.245.105:10180/gethls91_91_14_0_0.m3u8?uuid=2fb82989
			          //https://www.runoob.com/try/demo_source/movie.mp4
//			          type: "video/mp4",
			          type: "application/x-mpegURL",
			          src: '', //你的m3u8地址（必填）
			          withCredentials: false
			        }
			      ],
			      hls:true,
			      poster: "", //你的封面地址
			      width: document.documentElement.clientWidth,
			      notSupportedMessage: "此视频暂无法播放，请稍后再试" //允许覆盖Video.js无法播放媒体源时显示的默认信息。
			      //        controlBar: {
			      //          timeDivider: true,
			      //          durationDisplay: true,
			      //          remainingTimeDisplay: false,
			      //          fullscreenToggle: true  //全屏按钮
			      //        }
			    },
			
		   playerOptions11111: {
			   playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
			   autoplay: false, // 如果为true,浏览器准备好时开始回放。
			   muted: false, // 默认情况下将会消除任何音频。
			   loop: false, // 是否视频一结束就重新开始。
			   preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
			   language: 'zh-CN',
			   aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
			   fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
			   sources: [{
			    type: "video/mp4", // 类型
			    src: 'https://www.runoob.com/try/demo_source/movie.mp4' // url地址
			   }],
			   poster: '', // 封面地址
			   notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
			   controlBar: {
			    timeDivider: true, // 当前时间和持续时间的分隔符
			    durationDisplay: true, // 显示持续时间
			    remainingTimeDisplay: false, // 是否显示剩余时间功能
			    fullscreenToggle: true // 是否显示全屏按钮
			   }
		   }
		  }
		},
		methods:{
			
			onPlayerPlay(player) {
		      // alert("play");
		    },
		    onPlayerPause(player) {
		      // alert("pause");
		    },
		    closeInfo(){
		    	this.$refs.videoPlayer.player.pause()
		    	this.$emit('closeVideo',false);
		    },
		}

	}
</script>

<style scoped>
	.realTimeVideo,.video-player{display:flex;flex-wrap:nowrap;align-items:center;}
	.realTimeVideo{
		position:absolute;top:0;left:0;z-index:30000;
		width:100%;height:100%;
		background:rgba(0,0,0,.35);
		justify-content:center;
	}
	.realTimeVideoBody{position:relative;width:1260px;height:745px;line-height:745px;border:1px solid #00479d;background-color: #0d2145;}
	.video-player{height:100%;width:100%;}
	.close{
		position:absolute;right:-25px;top:-25px;
		width:26px;height:26px;background:url('../../assets/images/close.png')no-repeat;background-size:contain;
		cursor:pointer;
		background-color: #00224c;
	    border-radius: 28px;
	    overflow: hidden;
	}
</style>